<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
		</demo-desc>

		<fu-section title="基础案例" customClass="fu-m-t-20" type="line">
			<fu-read-more>
				<rich-text :nodes="content"></rich-text>
			</fu-read-more>
		</fu-section>

		<fu-section title="允许展开后收起" customClass="fu-m-t-20" type="line">
			<fu-read-more :closeBtn="true">
				<rich-text :nodes="content"></rich-text>
			</fu-read-more>
		</fu-section>

		<fu-section title="修改显示内容的高度" customClass="fu-m-t-20" type="line">
			<fu-read-more :closeBtn="true" :showHeight="200">
				<rich-text :nodes="content"></rich-text>
			</fu-read-more>
		</fu-section>

		<fu-section title="自定义展开收起文本和图标" customClass="fu-m-t-20" type="line">
			<fu-read-more :closeBtn="true" openIcon="" openText="付费查看剩余内容" closeText="下次再看"
				closeIcon="close">
				<rich-text :nodes="content"></rich-text>
			</fu-read-more>
		</fu-section>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const content = ref(`
		采薇采薇，薇亦作止。‌
		采薇菜呀采薇菜，薇菜嫩芽刚冒出。
		‌曰归曰归，岁亦莫止。‌
		说回家呀说回家，转眼一年将尽时。
		‌靡室靡家，玁狁之故。‌
		抛家别亲去征战，只因猃狁犯边疆。
		‌不遑启居，玁狁之故。‌
		无暇休息忙戍守，猃狁猖狂难安家。
		
		‌采薇采薇，薇亦柔止。‌
		采薇菜呀采薇菜，薇菜柔嫩充饥肠。
		‌曰归曰归，心亦忧止。‌
		说回家呀说回家，心中愁闷复惆怅。
		‌忧心烈烈，载饥载渴。‌
		忧心如焚又饥渴，独行苍茫路漫长。
		‌我戍未定，靡使归聘。‌
		战事频繁常调防，家书无由寄故乡。
		
		‌采薇采薇，薇亦刚止。‌
		采薇菜呀采薇菜，薇菜老硬难下咽。
		‌曰归曰归，岁亦阳止。‌
		说回家呀说回家，又到十月小阳春。
		‌王事靡盬，不遑启处。‌
		王室差事无休止，不得安宁心忧烦。
		‌忧心孔疚，我行不来！‌
		忧心忡忡病缠身，无人怜惜空悲叹。
		
		‌彼尔维何？维常之华。‌
		什么花儿正开放？棠棣花开吐芬芳。
		‌彼路斯何？君子之车。‌
		谁的车子高又大？将军战车四马拉。
		‌戎车既驾，四牡业业。‌
		战车呼啸冲敌阵，四马嘶鸣势如飞。
		‌岂敢定居？一月三捷。‌
		疆场岂能享安闲？一月三战血染衣。
		
		‌驾彼四牡，四牡騤騤。‌
		驾驭战车向前冲，四匹骏马如虎龙。
		‌君子所依，小人所腓。‌
		将军车上威武站，战士车后勇向前。
		‌四牡翼翼，象弭鱼服。‌
		战马从容步稳健，鱼皮箭袋挂雕弓。
		‌岂不日戒？玁狁孔棘！‌
		军情紧急常戒备，猃狁侵凌如风雨。
		
		‌昔我往矣，杨柳依依。‌
		当初离家出征时，杨柳依依春色浓。
		‌今我来思，雨雪霏霏。‌
		如今解甲归乡路，大雪纷飞天地寒。
		‌行道迟迟，载渴载饥。‌
		路途艰难步蹒跚，又饥又渴谁人怜。
		‌我心伤悲，莫知我哀！‌
		满腔辛酸无人诉，独对风雪泪满襟。
	`)
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
</style>